<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Lily后台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/css/admin.css" media="all">
  <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
</head>
<!--头部脚部 代码新增或者修改页面 -->
<body class="layui-layout-body">
<div class="layui-fluid">
    <div class="layui-card">
    	<form class="layui-form" action="" style='padding:10px'>
    		  
		    <div class="layui-form-item">
		    	<label class="layui-form-label">alt</label>
		    	<div class="layui-input-block">
			        <input type="text" name="alt" autocomplete="off" placeholder="请输入alt" class="layui-input">
			    </div>
		    </div>


        <div class="layui-form-item">
          <label class="layui-form-label">上传文件</label>
          <div class="layui-input-block">
             <input type="file" name="file" value="" id='file' onchange="upload()">
          </div>
          
        </div>

         <input type="text" name="newname" style="display:none" value="">
          <input type="text" name="type" style="display:none" value="">

<!-- 
		    <div class="layui-form-item">
		    	<label class="layui-form-label">上传文件</label>
		    	<div class="layui-input-block">
				    <div class="layui-upload">
					  <button type="button" class="layui-btn layui-btn-xs" id="upload_img">选择图片</button>
            <span style='color:#FF5722;font-size:12px'>视频及ie8不支持预览</span>
					  <div class="layui-upload-list">
					    <img class="layui-upload-img" style='width:200px' id="show_img">
					    <p id="demoText"></p>
					  </div>
					</div> 
			    </div>
          <input type="text" name="newname" style="display:none" value="">
          <input type="text" name="type" style="display:none" value="">
        </div> -->
		</form>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script src="layer.js"></script>
<script>

function upload(){

  var fileName = document.getElementById('file').files[0];
  var formData = new FormData();
      if (fileName != undefined) {
        formData.append('file', fileName);
      }
  $.ajax({
        url: "{:url('Index/Oos/upload_banner')}",
        /*传向后台服务器文件*/
        type: 'POST',
        /*传递方法 */
        data: formData,
        /*要带的值，在这里只能带一个formdata ，不可以增加其他*/
        dataType: 'json', //传递数据的格式
        async: true, //这是重要的一步，防止重复提交的
        cache: false, //设置为false，上传文件不需要缓存。
        contentType: false, //设置为false,因为是构造的FormData对象,所以这里设置为false。
        processData: false, //设置为false,因为data值是FormData对象，不需要对数据做处理。

        success: function(res) {
          if(res.status=='0'){
            return alert(res.msg);
          }else{
            $("input[name='newname']").val(res.newname);
            $("input[name='type']").val(res.type);
            return alert(res.msg);
          }
        }
      });

}

layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#upload_img'
    ,accept: 'file'
    ,url: "{:url('Base/upload')}"+"?upload_url=static/upload/banner/" //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        alert(file);
        return false;
        $('#show_img').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.status == '0'){
        return layer.msg(res.msg);
      }else{ //上传成功
        $("input[name='newname']").val(res.newname);
        $("input[name='type']").val(res.type);
        return layer.msg(res.msg);
      }
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});  
</script>
</body>
</html>